<template>
    <div class="data-statistics-box">
        <a-form layout="inline" class="search-form" >
            <a-form-item label="统计时间">
                <a-date-picker show-time placeholder="请输入统计时间" @change="onTimeChange"/>
            </a-form-item>
        </a-form>
        <div class="data-list-box">
            <div class="data-for-item" v-for="(item,index) in dataStatics" :key="item.key">
                <span class="title" :class="index === 0?'border-l':(index == 1?'bg-r':'')">{{ item.title }}</span>
                <span class="num" :class="index === 0?'border-l':(index == 1?'colo-r':'')">{{ item.num }}</span>
            </div>
        </div>
    </div>
</template>
<script>
import assessCheckApi from './service/api'
import blobType from '@/common/blobType'
import moment from 'moment'
import { dateDataServe } from './service/index'
export default {
    components:{
    },
    props:{

    },
    data(){
        return{
            dataStatics:[{
                title:'办理中',
                num:'',
                key:'blz'
            },{
                title:'超期数',
                num:'',
                key:'cqs'
            },{
                title:'当日完成',
                num:'',
                key:'drwc'
            },{
                title:'当日受理',
                num:'',
                key:'drsls'
            },{
                title:'月份完成',
                num:'',
                key:'bywc'
            },{
                title:'月份受理',
                num:'',
                key:'bysls'
            }]
        }
    },
    watch:{

    },
    mounted(){
        this.getDateDataServe('')
        
    },
    methods:{
        getDateDataServe(val){
            dateDataServe({startTime:val}).then(res=>{
                if(res.code == 200){
                    this.dataStatics.forEach((item,index)=>{
                        this.dataStatics[index].num = res.result[item.key]
                    })
                }
            })
        },
        onTimeChange(val){
            //console.log(val)
            this.getDateDataServe(moment(val).format('YYYY-MM-DD HH:mm:ss'))
        }
    }
}
</script>
<style lang="less" scoped>
.data-statistics-box{
    height: calc(100vh - 136px);
    width: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
    padding-top: 50px;
    .data-list-box{
        display: flex;
        // width: 100%;
        // border: 1px solid #7b7979;
        padding-top: 10px;
        .data-for-item{
            display: flex;
            flex-direction: column;
            // height: ;
            .title{
                display: inline-block;
                padding: 10px;
                font-size: 18px;
                color: #fff;
                background: #5ca3e5;
                border-right: 1px solid #e2dede;
            }
            .num{
                display: inline-block;
                text-align: center;
                font-size: 20px;
                font-weight: 600;
                padding: 5px 0;
                color: #5ca3e5;
                border-right: 1px solid #e2dede;
                border-bottom: 1px solid #e2dede;
            }
            .border-l{
                border-left: 1px solid #e2dede;
            }
            .bg-r{
                background: #ed5565;
            }
            .colo-r{
                color: #ed5565;
            }
        }
    }
}
</style>